<template>
  <div id="teamPage">
    <van-search v-model="searchText" placeholder="搜索队伍" @search="onSearch"/>
    <van-tabs v-model:active="active" @change="onTabChange">
      <van-tab title="公开" name="public">
        <template #title>
          <van-icon name="eye-o" size="14px"/>
          公开
        </template>
      </van-tab>
      <van-tab title="加密" name="private">
        <template #title>
          <van-icon name="lock" size="14px"/>
          加密
        </template>
      </van-tab>
    </van-tabs>
    <div style="margin-bottom: 16px"/>
    <van-button class="add-button" type="primary" icon="plus" @click="toAddTeam"/>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <team-card-list :team-list="teamList"/>
      <van-empty v-if="teamList?.length < 1" desc ription="数据为空"/>
    </van-pull-refresh>
  </div>

  <div style="text-align: center;
                padding: 20px 20px;
                column-span: all;"
  >
    <van-button type="primary" size="small" @click="loadClick">点击加载更多</van-button>
  </div>
</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";

const active = ref('public')
const router = useRouter();
const searchText = ref('');
const refreshing = ref(false);
/**
 * 切换查询状态
 * @param name
 */
const onTabChange = (name: string) => {
  // 查公开
  if (name === 'public') {
    listTeam(searchText.value, 0);
  } else {
    // 查加密
    listTeam(searchText.value, 2);
  }
}


const teamList = ref([]);

/**
 * 搜索队伍
 * @param val
 * @param status
 * @returns {Promise<void>}
 */
const listTeam = async (val: string = '', status: number = 0) => {
  const res = await myAxios.get("/team/list", {
    params: {
      searchText: val,
      pageNum: 1,
      status,
    },
  });
  if (res?.code === 0) {
    teamList.value = res.data;
  } else {
    teamList.value = [];
    const message = res?.message;
    Toast.fail(message);
  }
}


const onRefresh = async (val = '', status = 0) => {
  refreshing.value = true;
  await listTeam(val, status);
  Toast.success('刷新成功');
  refreshing.value = false;
};


onMounted(() => {
  listTeam();
})

const onSearch = () => {
  listTeam();
};

// 跳转到创建队伍页
const toAddTeam = () => {
  router.push({
    path: "/team/add"
  })
}

//分页加载
const pageNumByPublic = ref(2);
const pageNumByPrivate = ref(2);
const loadClick = async () => {
  let userListData;
  if (active.value === 'public') {
    userListData = await myAxios.get('/team/list/page', {
      params: {
        pageSize: 5,
        pageNum: pageNumByPublic.value++,
        status: 0
      },
    })
    Toast.success('加载成功')
  } else if (active.value === 'private') {
    userListData = await myAxios.get('/team/list/page', {
      params: {
        pageSize: 5,
        pageNum: pageNumByPrivate.value++,
        status: 2
      },
    })
    Toast.success('加载成功')
  }
  teamList.value = teamList.value.concat(userListData?.data);
}

</script>

<style scoped>
#teamPage {

}
</style>
